<template>
    <div class="main">
        <div class="left-top-echarts" v-for="(item,index) in dataList" :key="index">
            <div class="left-top-title">
                <span class="left-top-title-text">
                    <span>{{ item.name }}总数</span>
                    <span style="color: #edbe7e">{{ item.value }}</span>
                    <span>{{ item.unit }}</span>
                </span>
            </div>
            <Echart id="leftCenter" :options="item.pieData" class="left_center_inner" v-if="pageflag" ref="charts"/>
        </div>
    </div>
</template>

<script>
import _ from "lodash";
import {currentGET} from "api";
import {value} from "lodash/seq";

export default {
    props: ['childMessage'],
    data() {
        return {
            provinceStatData: null,
            dataList: [
                {
                    name: "藏品",
                    value: 301289,
                    unit: "(件/套)",
                    pieData: {}
                },
                {
                    name: "展览",
                    value: 301289,
                    unit: "个",
                    pieData: {}
                },
                {
                    name: "活动",
                    value: 301289,
                    unit: "个",
                    pieData: {}
                },
                {
                    name: "文创",
                    value: 301289,
                    unit: "(件/套)",
                    pieData: {}
                },
            ],
            // 藏品数据
            collectionData: [
                {
                    icon: 'circle',
                    value: 11693,
                    name: '一级文物        ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ff8251'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 12685,
                    name: '二级文物        ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#98f7f1'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 12516,
                    name: '三级文物        ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#edbf7f'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 15136,
                    name: '一般文物        ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#a7cded'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 13159,
                    name: '未定级文物     ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ae91eb'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 6,
                    name: '红色标语    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ae91eb'}, {offset: 1, color: '#fff'}]
                        }
                    }
                }
            ],
            // 展览数据
            spreadtrumData: [
                {
                    icon: 'circle',
                    value: 11693,
                    name: '常设展览    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ff8251'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 12685,
                    name: '临时展览    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#98f7f1'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 12516,
                    name: '数字展厅    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#edbf7f'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
            ],
            // 活动数据
            activityData: [
                {
                    icon: 'circle',
                    value: 11693,
                    name: '亲子活动    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ff8251'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 12685,
                    name: '师生活动    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#98f7f1'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 12516,
                    name: '校馆联合活动    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#edbf7f'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 15136,
                    name: '专业活动    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#a7cded'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 13159,
                    name: '特别活动   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ae91eb'}, {offset: 1, color: '#fff'}]
                        }
                    }
                }
            ],
            // 文创
            wenchuangData: [
                {
                    icon: 'circle',
                    value: 0,
                    name: '高仿精品    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ff8251'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '儿童用品    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#98f7f1'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '临展几年    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#edbf7f'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '生活随行    ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#a7cded'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '贵金属   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ae91eb'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '陶瓷器   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#50c4f7'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '图书音像   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#168478'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '服装服饰   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#ee6666'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '服装服饰   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#8e6d63'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '创意邮品   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#5f7d8c'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '文具用品   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#767676'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '琉璃制品   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#91cc75'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
                {
                    value: 0,
                    name: '电子优品   ',
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{offset: 0, color: '#fc8857'}, {offset: 1, color: '#fff'}]
                        }
                    }
                },
            ],
            //
            pageflag: true,
        };
    },
    created() {
    },
    mounted() {
        this.$nextTick(() => {
            this.dataList.forEach((item) => {
                item.pieData = _.clone({
                    tooltip: {
                        trigger: 'item'
                    },
                    title: {
                        text: item.name,
                        x: '33.2%',
                        y: '31.5%',
                        textStyle: {
                            color: "#fff",
                            fontSize: 12,
                            fontFamily: "SimSun",
                            fontWeight: 600,
                            // align: "center",
                            // width: "200px",
                        },
                    },
                    grid: {
                        // top: '100%',
                        bottom: '10%',
                        // left: '10%',
                        // right: '10%',
                    },
                    legend: {
                        data: [],
                        left: "45",
                        top: 170,
                        // bottom: 10,
                        orient: 'vertical',
                        textStyle: {
                            color: "#c7e3f9",
                            fontSize: 10
                        },
                        icon: 'circle',
                        itemWidth: 12, // 设置图例图标的宽度
                        itemHeight: 12 // 设置图例图标的高度
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            center: ['40%', '35%'],
                            radius: ['20%', '30%'],
                            avoidLabelOverlap: false,
                            label: {
                                color: '#c7e3f9',
                                show: true,
                                distanceToLabelLine: -25,
                                fontSize: 10,
                                position: 'outside',
                                // formatter: '{b} ({d}%)'
                                formatter: '{d}%'
                            },
                            // emphasis: {
                            //     label: {
                            //         show: true,
                            //         fontSize: 40,
                            //         fontWeight: 'bold'
                            //     }
                            // },
                            labelLine: {
                                show: false
                            },
                            data: this.collectionData,
                        },
                        {
                            type: "pie",
                            center: ['40%', '35%'],
                            // radius: ['20%', '30%'],
                            // center: ["50%", "50%"],
                            radius: ["18%", "19%"],
                            label: {
                                show: false,
                            },
                            legendHoverLink: false,
                            data: [
                                {
                                    value: 78,
                                    name: "",
                                    tooltip: {
                                        show: false // 禁用 tooltip 显示
                                    },
                                    emphasis: {
                                        scale: false // 禁用高亮状态下的缩放
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#FFF",
                                        },
                                    },
                                },
                            ],
                        },
                    ]
                });
            });

            this.dataList[1].pieData.series[0].data = this.spreadtrumData;

            this.dataList[2].pieData.series[0].data = this.activityData;

            this.dataList[3].pieData.series[0].data = this.wenchuangData;

            this.getData();
        })
    },
    beforeDestroy() {

    },
    methods: {
        // 获取饼图接口数据
        getData() {
            // currentGET("provinceStat", {}).then((res) => {
            //     if (res.success) {
                    // this.provinceStatData = res.data;
                    this.provinceStatData = this.childMessage;
                    // console.log(JSON.parse(JSON.stringify(this.provinceStatData)), "this.provinceStatData");
                    // 藏品数据
                    this.dataList[0].value = this.provinceStatData.collectionCount;
                    this.provinceStatData.collectionData.forEach((item, index) => {
                        this.$set(this.collectionData[index], "value", item.valule)
                        this.collectionData[index].name += item.valule;
                    });
                    this.collectionData.forEach((item,index)=>{
                        if (index < 5){
                            this.dataList[0].pieData.legend.data.push(item.name);
                        }
                    })
                    // 展览数据
                    this.dataList[1].value = this.provinceStatData.spreadtrumCount;
                    this.provinceStatData.spreadtrumData.forEach((item, index) => {
                        this.$set(this.spreadtrumData[index], "value", item.valule)
                        this.spreadtrumData[index].name += item.valule;
                    });
                    this.spreadtrumData.forEach((item,index)=>{
                        if (index < 5){
                            this.dataList[1].pieData.legend.data.push(item.name);
                        }
                    })
                    // 活动数据
                    this.dataList[2].value = this.provinceStatData.activityCount;
                    this.provinceStatData.activityData.forEach((item, index) => {
                        this.$set(this.activityData[index], "value", item.valule)
                        this.activityData[index].name += item.valule;
                    });
                    this.activityData.forEach((item,index)=>{
                        if (index < 5){
                            this.dataList[2].pieData.legend.data.push(item.name);
                        }
                    })
                    // 活动数据
                    this.dataList[3].value = this.provinceStatData.wenchuangCount;
                    this.provinceStatData.wenchuangData.forEach((item, index) => {
                        this.$set(this.wenchuangData[index], "value", item.valule)
                        this.wenchuangData[index].name += item.valule;
                    });
                    this.wenchuangData.forEach((item,index)=>{
                        if (this.dataList[3].pieData.legend.data.length < 5 && item.value > 0){
                            this.dataList[3].pieData.legend.data.push(item.name);
                        }
                    })
                }
                // this.dataList = res;
                // if (res.success) {
                //     this.init(res.data);
                // } else {
                //     this.pageflag = false;
                //     this.$Message({
                //         text: res.msg,
                //         type: "warning",
                //     });
                // }
            // });
        // },
    },
};
</script>
<style lang='scss' scoped>
.main {
  width: 100%;
  //height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 25px;
  //margin-left: 46px;
  margin-left: 40px;
}

.left-top-echarts {
  width: 252px;
  height: 292px;

  .left-top-title {
    position: absolute;
    width: 224px;
    height: 33px;
    font-size: 12px;
    background-image: url("../../assets/img/echarts_title.png");
    //background-size: 100% 100%;
    background-size: cover;

    .left-top-title-text {
      position: absolute;
      left: 25px;
      top: 10px;
    }
  }
}

</style>
